<!DOCTYPE html>
<style>
body {
    margin: 0;
    padding: 0;
}
table {
    padding: 0;
    border: 0;
    border-spacing: 0;
    display: inline-table;
    background-color: black;
}
span {
   font: 50px Ahem;
   line-height: 80px;
}
td {
    border: 0px;
    padding: 10px;
    height: 20px;
}
</style>
<script src="../../resources/check-layout.js"></script>
<span data-total-y=15>
    Text
    <table data-total-y=25>
        <tr><td></td></tr>
    </table>
    Text
</span>
<p>crbug.com/452593: If an inline-table consists of a single row which consists of a single empty cell, then the
   baseline of the inline-table coincides with the baseline of the row  which coincides with the bottom content edge of the cell.
   The black boxes on the left and right  will align together along their bottom edges. The one in the middle will be halfway
   down vertically between the two.
   </p>
   <p id="test-output"></p>
<script>
checkLayout('table', document.getElementById("test-output"));
checkLayout('span', document.getElementById("test-output"));
</script>
